<template>
  <view class="container">
    <view class="header">
      <text class="title">修改个人信息</text>
    </view>
    
    <view class="form-container">
      <view class="form-group">
        <text class="label">用户名</text>
        <input 
          v-model="userInfo.username" 
          type="text" 
          class="input" 
          placeholder="请输入用户名" 
          :class="{ 'input-focus': usernameFocus }"
          @focus="usernameFocus = true"
          @blur="usernameFocus = false"
        />
        <text v-if="usernameError" class="error-message">{{ usernameError }}</text>
      </view>
      
      <view class="form-group">
        <text class="label">旧密码</text>
        <input 
          v-model="userInfo.oldPassword" 
          type="password" 
          class="input" 
          placeholder="请输入旧密码" 
          :class="{ 'input-focus': oldPasswordFocus }"
          @focus="oldPasswordFocus = true"
          @blur="oldPasswordFocus = false"
        />
        <text v-if="oldPasswordError" class="error-message">{{ oldPasswordError }}</text>
      </view>
      
      <view class="form-group">
        <text class="label">新密码</text>
        <input 
          v-model="userInfo.newPassword" 
          type="password" 
          class="input" 
          placeholder="请输入新密码（8-16位）" 
          :class="{ 'input-focus': newPasswordFocus }"
          @focus="newPasswordFocus = true"
          @blur="newPasswordFocus = false"
        />
        <text v-if="newPasswordError" class="error-message">{{ newPasswordError }}</text>
      </view>
      
      <view class="form-group">
        <text class="label">确认新密码</text>
        <input 
          v-model="userInfo.confirmPassword" 
          type="password" 
          class="input" 
          placeholder="请再次输入新密码" 
          :class="{ 'input-focus': confirmPasswordFocus }"
          @focus="confirmPasswordFocus = true"
          @blur="confirmPasswordFocus = false"
        />
        <text v-if="confirmPasswordError" class="error-message">{{ confirmPasswordError }}</text>
      </view>
    </view>
    
    <!-- 自定义按钮 -->
    <view 
      class="custom-btn" 
      :class="{ 'custom-btn-active': isFormValid }"
      @click="submitForm"
    >
      <text class="btn-text">{{ submitting ? '提交中...' : '保存修改' }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ApiUpdateUser,ApiGetUser } from '../api/user'
import { useInfoStore } from '/store';

const user = useInfoStore();

// 用户信息对象
const userInfo = ref({
  username: '',
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 获取用户信息
const getUsetInfo = async () => {
  let res = await ApiGetUser();
  userInfo.value = res
  // 将用户信息存放再缓存里面
  user.userInfo = res
}

// 输入框焦点状态
const usernameFocus = ref(false)
const oldPasswordFocus = ref(false)
const newPasswordFocus = ref(false)
const confirmPasswordFocus = ref(false)

// 错误信息
const usernameError = ref('')
const oldPasswordError = ref('')
const newPasswordError = ref('')
const confirmPasswordError = ref('')

// 是否正在提交
const submitting = ref(false)

// 表单验证
const validateForm = () => {
  // 重置错误
  usernameError.value = ''
  oldPasswordError.value = ''
  newPasswordError.value = ''
  confirmPasswordError.value = ''

  let isValid = true

  // 用户名验证
  if (!userInfo.value.username.trim()) {
    usernameError.value = '用户名不能为空'
    isValid = false
  }

  // 旧密码验证
  if (!userInfo.value.oldPassword.trim()) {
    oldPasswordError.value = '旧密码不能为空'
    isValid = false
  }

  // 新密码验证
  if (!userInfo.value.newPassword.trim()) {
    newPasswordError.value = '新密码不能为空'
    isValid = false
  } else if (userInfo.value.newPassword.length < 8 || userInfo.value.newPassword.length > 16) {
    newPasswordError.value = '新密码长度必须在8-16位之间'
    isValid = false
  }

  // 确认密码验证
  if (!userInfo.value.confirmPassword.trim()) {
    confirmPasswordError.value = '请确认新密码'
    isValid = false
  } else if (userInfo.value.confirmPassword !== userInfo.value.newPassword) {
    confirmPasswordError.value = '两次输入的密码不一致'
    isValid = false
  }

  return isValid
}

// 表单是否有效（计算属性）
const isFormValid = computed(() => {
  return (
    userInfo.value.username.trim() !== '' &&
    userInfo.value.oldPassword.trim() !== '' &&
    userInfo.value.newPassword.trim() !== '' &&
    userInfo.value.confirmPassword.trim() !== '' &&
    userInfo.value.newPassword.length >= 8 &&
    userInfo.value.newPassword.length <= 16 &&
    userInfo.value.newPassword === userInfo.value.confirmPassword
  )
})

// 提交表单
const submitForm = async () => {
  if (!validateForm()) return

  submitting.value = true
  
  try {
   //发起请求修改密码
   await ApiUpdateUser(userInfo.value)
   getUsetInfo()
    uni.showToast({
      title: '修改成功',
      icon: 'none',
      duration: 2000
    })
    
    // 提交成功后的处理
    userInfo.value = {
      username: '',
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
	  }
  } catch (error) {
    console.error('提交失败:', error)
    uni.showToast({
      title: '修改失败',
      icon: 'none',
      duration: 2000
    })
  } finally {
    submitting.value = false
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 60rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.form-container {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.05);
}

.form-group {
  margin-bottom: 40rpx;
}

.label {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 15rpx;
  display: block;
  font-weight: 500;
}

.input {
  width: 100%;
  height: 90rpx;
  padding: 0 20rpx;
  border-radius: 15rpx;
  border: 2rpx solid #e0e0e0;
  font-size: 32rpx;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.input-focus {
  border-color: #1989fa;
  box-shadow: 0 0 15rpx rgba(25, 137, 250, 0.3);
  animation: pulse 1s;
}

.error-message {
  color: #ff4d4f;
  font-size: 24rpx;
  margin-top: 10rpx;
  height: 30rpx;
}

/* 自定义按钮样式 */
.custom-btn {
  width: 100%;
  height: 90rpx;
  background-color: #333;
  color: #fff;
  border-radius: 45rpx; /* 圆角设置 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36rpx;
  margin-top: 60rpx;
  opacity: 0.5;
  transition: all 0.3s ease;
  cursor: not-allowed;
}

.custom-btn-active {
  background-color: #4CAF50; /* 更改为更美观的绿色 */
  opacity: 1;
  box-shadow: 0 5rpx 20rpx rgba(76, 175, 80, 0.3);
  cursor: pointer;
}

.custom-btn:active {
  transform: scale(0.98);
}

.btn-text {
  font-size: 36rpx;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(25, 137, 250, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10rpx rgba(25, 137, 250, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(25, 137, 250, 0);
  }
}
</style>